var VSHADER_SOURCE = 
	'attribute vec4 a_Position;\n' +
	'attribute vec2 a_TexCoord;\n' + 
	'varying vec2 v_TexCoord;\n' +
	'void main() {\n' +
	'	gl_Position = a_Position;\n' +
	'	v_TexCoord = a_TexCoord;\n' +
	'}\n'

var FSHADER_SOURCE = 
	'precision mediump float;\n' +
	'uniform sampler2D u_Sampler;\n' +
	'varying vec2 v_TexCoord;\n' + 
	'void main() {\n' +
	'	gl_FragColor = texture2D(u_Sampler, v_TexCoord);\n' +
	'}\n';

function main() {
  	let canvas = document.getElementById('webgl');

  	let gl = getWebGLContext(canvas);
  	if (!gl) {
    	console.log('Failed to get the rendering context for WebGL');
    	return;
  	}

  	if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    	console.log('Failed to intialize shaders.');
    	return;
  	}

  	let n = initVertexBuffers(gl);
  	if (n < 0) {
    	console.log('Failed to set the vertex information');
    	return;
  	}


  	gl.clearColor(0.0, 0.0, 0.0, 1.0);

  	if (!initTextures(gl, n)) {
    	console.log('Failed to intialize the texture.');
    	return;
 	}
}


function initVertexBuffers(gl) {
	let verticesTexCoords = new Float32Array([
		-0.5,  0.5, -0.3,  1.7,
		-0.5, -0.5, -0.3, -0.2,
		 0.5,  0.5,  1.7,  1.7,
		 0.5, -0.5,  1.7, -0.2
	]);

	let n = 4;

	let vertexTexCoordBuffer =  gl.createBuffer();
	if (!vertexTexCoordBuffer) {
		console.log('Failed to create the buffer object');
		return -1;
	}

	gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
	
	let FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
	let a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  	if (a_Position < 0) {
    	console.log('Failed to get the storage location of a_Position');
    	return -1;
  	}
  	gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0);
  	gl.enableVertexAttribArray(a_Position);

  	let a_TexCoord = gl.getAttribLocation(gl.program, "a_TexCoord");
  	if (a_TexCoord < 0) {
  		console.log('Failed to get the storage location of a_TexCoord');
  		return -1;
  	}
  	gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
  	gl.enableVertexAttribArray(a_TexCoord);

  	return n;
}

function initTextures(gl, n) {
	let texture = gl.createTexture();
	let u_Sampler = gl.getUniformLocation(gl.program, "u_Sampler");
  	if (!u_Sampler) {
    	console.log('Failed to get the storage location of u_Sampler');
   		return false;
  	}

	let image = new Image(); 

	image.onload = function(){
		loadTexture(gl, n, texture, u_Sampler, image);
	}
 
 	image.src = "../resources/sky.jpg";
 	return true;
}

function loadTexture(gl, n, texture, u_Sampler, image) {
	gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
	
	gl.activeTexture(gl.TEXTURE0);

	gl.bindTexture(gl.TEXTURE_2D, texture);

	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

	// Clamp_Mirror
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);

	gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);

	gl.uniform1i(u_Sampler, 0);

	 gl.clear(gl.COLOR_BUFFER_BIT);   // Clear <canvas>

  	gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); // Draw the rectangle
}